<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>g360</title>
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/resources/favicon.ico">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/resources/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/zTree/css/zTreeStyle/zTreeStyle.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/resources/easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript"
            src="${pageContext.request.contextPath}/resources/zTree/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div id="main" class="easyui-layout" data-options="fit : true">
    <div data-options="region:'north',title:'g360',split:true" style="height:70px;">
        JAVA 综合学习 当前用户:<shiro:principal></shiro:principal> <a href="${pageContext.request.contextPath}/logout">退出</a>
    </div>
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
        <ul id="tree" class="ztree" style="width:150px; overflow:auto;"></ul>
    </div>
    <div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
        <div id="tabs" class="easyui-tabs" data-options="fit: true">
            <div title="welcome">
                欢迎页!
            </div>
        </div>
    </div>
    <div data-options="region:'east',title:'properties',split:true" style="width:100px;">

    </div>
    <div data-options="region:'south',title:'',split:true" style="text-align: center;">
        Copyright
    </div>
</div>
<script>
    // 菜单树对象
    var zTreeObject;
    // 首页布局对象
    var mainLayout;
    // 首页tab集合
    var mainTabs;

    var setting = {
        async: {
            enable: true,
            url: '${pageContext.request.contextPath}/resource/getResourcesByParentId',
            autoParam: ['id'],
            type : 'get'
        },
        callback : {
            onClick: zTreeOnClick
        }
    };

    var nodes = [
        <c:forEach items="${menus}" var="m" varStatus="mStatus">
        {'id': ${m.id}, 'isParent': true, 'name': '${m.name}'}
        <c:if test="${not mStatus.last}">
        ,
        </c:if>
        </c:forEach>
    ];
    $(function () {
        zTreeObject = $.fn.zTree.init($('#tree'), setting, nodes);
        mainLayout = $('#main');
        mainTabs = $('#tabs');
    });

    function zTreeOnClick(event, treeId, treeNode) {
        if(treeNode.isParent) {
            // 可以在这边展开菜单
            return false;
        }

        // 数据库监控的，路径不会配置，直接新窗口打开
        if(treeNode.id == 61) {
            return false;
        }

        // 根据点击选择tab
        selectTab(treeId, treeNode);

        //通知浏览器不要执行与事件关联的默认动作。
        event.preventDefault();
    }

    function selectTab(which, treeNode) {
        if( mainTabs.tabs('exists',which) ) {
            mainTabs.tabs('select',which);
        } else {
            addTab(which, treeNode);
        }
    }

    function addTab(which, treeNode) {
        mainTabs.tabs('add', {
            id: which,
            title: treeNode.name,
            href: treeNode.url,
            fit: true
        });
    }
</script>
</body>
</html>